<div class="devui-demo-container" dAnchorBox dAnchorHashSupport [view]="{ top: 180, bottom: 0 }">
  <d-demo-nav [navItems]="navItems"></d-demo-nav>
  <div class="devui-demo-example" [dAnchor]="'button-primary'">
    <div class="devui-demo-title">{{ 'components.button.button-primary.title' | translate }}</div>
    <div class="devui-demo-text"></div>
    <d-codebox id="components-button-primary" [sourceData]="primarySource">
      <d-button-primary demo></d-button-primary>
    </d-codebox>
  </div>

  <div class="devui-demo-example" [dAnchor]="'button-common'">
    <div class="devui-demo-title">{{ 'components.button.button-common.title' | translate }}</div>
    <div class="devui-demo-text"></div>
    <d-codebox id="components-button-common" [sourceData]="commonSource">
      <d-button-common demo></d-button-common>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'button-primary-and-common'">
    <div class="devui-demo-title">
      {{ 'components.button.button-primary-and-common.title' | translate }}
    </div>
    <div class="devui-demo-text">
      {{ 'components.button.button-primary-and-common.description' | translate }}
    </div>
    <d-codebox id="components-button-combination" [sourceData]="combinationSource">
      <d-button-combination demo></d-button-combination>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'button-left-right'">
    <div class="devui-demo-title">{{ 'components.button.button-left-right.title' | translate }}</div>
    <d-codebox id="components-button-left-right" [sourceData]="leftRightSource">
      <d-button-left-right demo></d-button-left-right>
    </d-codebox>
  </div>

  <div class="devui-demo-example" [dAnchor]="'button-danger'">
    <div class="devui-demo-title">{{ 'components.button.button-danger.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.button.button-danger.description' | translate }}</div>
    <d-codebox id="components-button-danger" [sourceData]="dangerSource">
      <d-button-danger demo></d-button-danger>
    </d-codebox>
  </div>

  <div class="devui-demo-example" [dAnchor]="'button-text'">
    <div class="devui-demo-title">{{ 'components.button.button-text.title' | translate }}</div>
    <div class="devui-demo-text"></div>
    <d-codebox id="components-button-text" [sourceData]="textSource">
      <d-button-text demo></d-button-text>
    </d-codebox>
  </div>

  <div class="devui-demo-example" [dAnchor]="'button-loading'">
    <div class="devui-demo-title">{{ 'components.button.button-loading.title' | translate }}</div>
    <div class="devui-demo-text"></div>
    <d-codebox id="components-button-loading" [sourceData]="loadingSource">
      <d-button-loading demo></d-button-loading>
    </d-codebox>
  </div>

  <div class="devui-demo-example" [dAnchor]="'button-auto-focus'">
    <div class="devui-demo-title">{{ 'components.button.button-auto-focus.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.button.button-auto-focus.description' | translate }}</div>
    <d-codebox id="components-button-autofocus" [sourceData]="autofocusSource">
      <d-button-autofocus demo></d-button-autofocus>
    </d-codebox>
  </div>

  <div class="devui-demo-example" [dAnchor]="'button-icon'">
    <div class="devui-demo-title">{{ 'components.button.button-icon.title' | translate }}</div>
    <div class="devui-demo-text"></div>
    <d-codebox id="components-tabs-default" [sourceData]="iconSource">
      <d-button-icon demo></d-button-icon>
    </d-codebox>
  </div>

  <div class="devui-demo-example" [dAnchor]="'button-size'">
    <div class="devui-demo-title">{{ 'components.button.button-size.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.button.button-size.description' | translate }}</div>
    <d-codebox id="components-button-size" [sourceData]="sizeSource">
      <d-button-size demo></d-button-size>
    </d-codebox>
  </div>

  <div class="devui-demo-example" [dAnchor]="'button-groups'">
    <div class="devui-demo-title">{{ 'components.button.button-groups.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.button.button-groups.description' | translate }}</div>
    <d-codebox id="components-button-groups" [sourceData]="groupsSource">
      <d-button-groups demo></d-button-groups>
    </d-codebox>
  </div>
</div>
